<template>
  <div class="detail">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">id:345632</a></el-breadcrumb-item>
    </el-breadcrumb>
    <hr width="100%" height="20px" color="#6BC4FF">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="serial" label="序号" width="100">
      </el-table-column>
      <el-table-column prop="date" label="问诊日期" width="130">
      </el-table-column>
      <el-table-column prop="name" label="患者姓名" width="130">
      </el-table-column> 
      <el-table-column prop="age" label="年龄" width="100"> </el-table-column>
      <el-table-column prop="money" label="支付金额" width="100"></el-table-column>
        <el-table-column prop="illness" label="病情" width="130">
        </el-table-column>
        <el-table-column prop="ming" label="问诊医师姓名" width="130">
        </el-table-column>
        <el-table-column prop="job" label="问诊医师职称" width="180">
        </el-table-column>
        <el-table-column prop="hospital" label="问诊医师隶属医院" width="180">
      </el-table-column>
      <el-table-column prop="handle" label="操作" width="115">
        <template slot-scope="scope">
          <el-button type="text" @click="open(scope.row)">诊断报告</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="诊断报告"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <ul class="ul">
        <li>{{aa.date}}</li>
        <li>姓名:{{aa.name}}</li>
        <li>年龄:{{ aa.age }}</li>
        <li>医院名称:{{aa.hospital}}</li>
        <li>病情:{{aa.illness}}</li>
        <li>问诊医师:{{aa.ming}}</li>
        <li>支付金额:{{aa.money}}</li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
export default {
  created(){
    axios.get("/api/lis").then(res=>{
       console.log(res);
       this.tableData=res.data.tableData
       this.sicklist=res.data.sicklist
    })
  },
  data() {
    return {
      tableData:[],
      sicklist:[],
  
      dialogVisible: false,
      aa:{}
    };
  },
  methods: {
    //弹框
    open(row) {
      console.log(row);
      this.dialogVisible=true;
      this.aa=row
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
html,
body {
  width: 100%;
  height: 100%;
}
.detail{
  ul{
    li{
         margin-top:10px;
    }
  }
  hr{
     margin-top:10px;
     margin-bottom:10px;
  }
}
</style>